<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="../css/mui.css">
        <link rel="stylesheet" href="./css/demo-common.css">
        <link rel="stylesheet" href="./css/atom-one-light.css">
        <script src="./js/jquery-2.2.3.min.js"></script>
        <script src="./js/highlight.pack.js"></script>
        <script src="../js/tab.js"></script>
    </head>
    <body>
        <h3>Tabs选项卡</h3>

        <h4>默认样式</h4>
        <section>
            <div class="example">
                <p>使用类名<mark>.tab-content</mark>和<mark>.tab-pane</mark>创建选项卡对应的内容。</p>
                <p>将<mark>&lt;a&gt;</mark>标签的<mark>href</mark>属性指向对应内容的id。</p>
                <br/>
                <ul class="tabs tabs-default">
                    <li class="tab active">
                        <a href="#con1">Tab1</a>
                    </li>
                    <li class="tab" href="#con2">
                        <a href="#con2"><i class="fa fa-apple"></i>Tab2</a>
                    </li>
                    <li class="tab">
                        <a href="#con3">Tab3</a>
                    </li>
                    <li class="tab disabled"><a href="#con4">Tab4</a></li>
                    <li class="tab"><a href="http://www.baidu.com">百度</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="con1">content1</div>
                    <div class="tab-pane" id="con2">content2</div>
                    <div class="tab-pane" id="con3">content3</div>
                    <div class="tab-pane" id="con4">content4</div>
                </div>
            </div>
            <pre><code class="html">    &lt;!-- html --&gt;
     &lt;ul class="tabs tabs-default"&gt;
         &lt;li class="active"&gt;
             &lt;a href="#con1"&gt;Tab1 &lt;/a&gt;
         &lt;/li&gt;
         &lt;li href="#con2"&gt;
             &lt;a href="#con2"&gt; &lt;i class="fa fa-apple"&gt; &lt;/i&gt;Tab2 &lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;a href="#con3"&gt;Tab3 &lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="disabled"&gt; &lt;a href="#con4"&gt;Tab4 &lt;/a&gt; &lt;/li&gt;
         &lt;li&gt; &lt;a href="http://www.baidu.com"&gt;百度 &lt;/a&gt; &lt;/li&gt;
     &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane" id="con1"&gt;content1&lt;/div&gt;
        &lt;div class="tab-pane" id="con2"&gt;content2&lt;/div&gt;
        &lt;div class="tab-pane" id="con3"&gt;content3&lt;/div&gt;
        &lt;div class="tab-pane" id="con4"&gt;content4&lt;/div&gt;
    &lt;/div&gt;</code></pre>
        </section>
        
        <h4>卡片</h4>
        <section>
            <div class="example">
                <ul class="tabs tabs-card">
                    <li class="tab active">
                        <a href="#d1">Tab1</a>
                    </li>
                    <li class="tab">
                        <a href="#d2"><i class="fa fa-apple"></i>Tab2</a>
                    </li>
                    <li class="tab">
                        <a href="#d3">Tab3</a>
                    </li>
                    <li class="tab disabled">
                        <a href="#d4">Tab4</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="d1">content1</div>
                    <div class="tab-pane" id="d2">content2</div>
                    <div class="tab-pane" id="d3">content3</div>
                </div>
            </div>
            <pre><code class="html">    &lt;!-- html --&gt;
    &lt;ul class="tabs tabs-card"&gt;
        ...
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
        ...
    &lt;/div&gt;</code></pre>
        </section>

        <h4>带边框的卡片</h4>
        <section>
            <div class="example">
                <p>给tab-content添加类<mark>bordered</mark>。</p>
                <br>
                <ul class="tabs tabs-card">
                    <li class="tab active">
                        <a href="#e1">Tab1</a>
                    </li>
                    <li class="tab">
                        <a href="#e2"><i class="fa fa-apple"></i>Tab2</a>
                    </li>
                    <li class="tab">
                        <a href="#e3">Tab3</a>
                    </li>
                    <li class="tab disabled">
                        <a href="#e4">Tab4</a>
                    </li>
                </ul>
                <div class="tab-content bordered">
                    <div class="tab-pane" id="e1">content1</div>
                    <div class="tab-pane" id="e2">content2</div>
                    <div class="tab-pane" id="e3">content3</div>
                    <div class="tab-pane" id="e4">content4</div>
                </div>
            </div>
            <pre><code class="html">    &lt;!-- html --&gt;
    &lt;ul class="tabs tabs-card"&gt;
        ...
    &lt;/ul&gt;
    &lt;div class="tab-content bordered"&gt;
        ...
    &lt;/div&gt;</code></pre>
        </section>

        <h4>通过Javascript初始化</h4>
        <section>
            <div class="example">
                <p>选项卡是自动初始化的，但是如果你动态创建选项卡，就必须像这样初始化。</p>
            </div>
            <pre><code>
    $('.tabs').tab();
            </code></pre>
        </section>

        <script>
        $(document).ready(function() {
          $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        });
        </script>
    </body>
</html>